import React from 'react';
import { Divider, Table, Typography } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';

const GoodsInfo: React.FC<{goodsList: any[]; title: string;}> = (props) => {
  const { goodsList, title } = props;
  
  const columns: ProColumns<any>[] = [
    {
      title: '品牌',
      dataIndex: 'brand_name'
    },
    {
      title: '名称',
      dataIndex: 'goods_name'
    },
    {
      title: '编号',
      dataIndex: 'goods_id'
    },
    {
      title: '规格',
      dataIndex: 'specs_desc'
    },
    {
      title: '数量',
      dataIndex: 'goods_num',
      align: 'right',
      width: 90
    },
    {
      title: '单价',
      align: 'right',
      valueType: 'money',
      dataIndex: 'selling_price',
      width: 90
    },
    {
      title: '小计',
      align: 'right',
      valueType: 'money',
      dataIndex: 'total_selling_price',
      width: 90
    }
  ];

  return <div className="service-record">
     <div className="header">
        <div className="title">{title}</div>
      </div>

      <Divider style={{margin: '10px 0 0'}}/>
      
      <ProTable<any> 
        bordered  
        rowKey="record_id"
        options={false}
        search={false}
        dataSource={goodsList}
        columns={columns}
        pagination={false}
        summary={pageData => {
          let totalAmount = 0
          pageData.forEach(({ total_selling_price }) => {
            totalAmount += Number(total_selling_price)
          })
          return (
            <>
              <Table.Summary.Row>
                <Table.Summary.Cell align="right" colSpan={7} index={1}>
                  <Typography.Text strong> 合计： </Typography.Text>
                  <Typography.Text strong type="danger">¥{totalAmount.toFixed(2)}</Typography.Text>
                </Table.Summary.Cell>
              </Table.Summary.Row>
            </>
          )
        }}
      />
  </div>
}
export default GoodsInfo;